﻿@page "/DropDown-List/Filtering"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the filtering functionalities of the DropDownList. Click the DropDownList element and then type a character in the search box. It will display the filtered list items based on the typed characters.</p>
</SampleDescription>
<ActionDescription>
   <p>The DropDownList has built-in support to filter the data source, when <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.IDropDownList.html#Syncfusion_Blazor_DropDowns_IDropDownList_AllowFiltering' target='_blank'> AllowFiltering</a> is enabled. It performs when characters are typed in the search box. In the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-1.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_1_Filtering' target='_blank'> Filtering</a> event, you can filter down the data source and return the resulted data to DropDownList via <code>UpdateData</code> method to display its list items.</p>
   <p>More information on the filtering feature configuration can be found in the <a href='https://blazor.syncfusion.com/documentation/dropdown-list/filtering/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <SfDropDownList TValue="string" TItem="Countries" Placeholder="Select a country" AllowFiltering="true" DataSource="@Country">
            <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
        </SfDropDownList>
    </div>
</div>

<style>
    .control_wrapper {
        width: 350px;
        margin: 0 auto;
        padding-top: 70px;
    }
</style>

@code{
    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    private List<Countries> Country = new List<Countries>
{
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };
}
